<template>
  <div>
    <div id="page-change">
      <ul class="post-navigation">
        <li class="next" @click="first">
          <a href="javascript:;"><i class="lni-angle-double-left"></i></a>
        </li>
        <page-item
          @changeindex="reduceindex"
          :pageindex="index - 1"
          :maxindex="maxindex"
        ></page-item>
        <page-item
          @changeindex="reloadindex"
          :pageindex="index"
          :maxindex="maxindex"
          :isactive="true"
        >
        </page-item>
        <page-item
          @changeindex="addindex"
          :pageindex="index + 1"
          :maxindex="maxindex"
        ></page-item>
        <li class="next" @click="last">
          <a href="javascript:;"><i class="lni-angle-double-right"></i></a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      index: 1,
      maxindex: 10,
    };
  },
  methods: {
    first() {
      this.index = 1;
    },
    last() {
      this.index = this.maxindex;
    },
    addindex() {
      this.index++;
    },
    reloadindex() {},
    reduceindex() {
      this.index--;
    },
  },
  components: {
    "page-item": {
      props: {
        pageindex: {
          type: Number,
          default: 0,
        },
        maxindex: {
          type: Number,
          default: 1,
        },
        isactive: {
          type: Boolean,
          default: false,
        },
      },
      template:
        "<li :class='{active: isactive}' v-show='pageindex>0 && pageindex<=maxindex'><a href='javascript:;' @click='toPage'>{{pageindex}}</a></li>",
      methods: {
        toPage() {
          this.$emit("changeindex");
        },
      },
    },
  },
};
</script>

<style>
#page-change li.active a {
  color: white;
}
#page-change li:hover {
  color: white;
}
</style>
